<!-- <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=750,user-scalable=0"/>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>专业搬家</title>
    <link rel="stylesheet" href="__PUBLIC__/css/weui.css?t=2014102898918">
    <link rel="stylesheet" href="__PUBLIC__/css/jquery-weui.min.css?t=2014102898918">   
   
</head>

<body>
<div id="loadingToast" class="weui_loading_toast" style="display:block;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <div class="weui_loading">          
            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
        </div>
        <p class="weui_toast_content">数据加载中</p>
    </div>
</div>
    
</body>
    <script src="__PUBLIC__/js/jquery.min.js?t=2014102898918"></script>
    <script src="__PUBLIC__/js/jquery-weui.min.js?t=2014102898918"></script>


</html> -->


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
 <link rel="stylesheet" href="__PUBLIC__/css/weui.css?t=2014102898918">

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script>   

     $(document).on("click","#showToast",function(){
        //toast();
        toast("我的自定义");
     });

     $(document).on("click","#showLoadingToast",function(){
        //loadingToast();
        loadingToast('自定义文字');
        setTimeout(function(){
            $('#loadingToast').fadeOut('fast');
        },1800);        
     });


     function toast(){
        var msg;
        arguments[0] ? msg = arguments[0] : msg = '已完成';
        var toast;
        toast = '\
                 <div id="toast" style="display:none;">\
                    <div class="weui_mask_transparent"></div>\
                    <div class="weui_toast">\
                       <i class="weui_icon_toast"></i>\
                       <p class="weui_toast_content">' + msg + '</p>\
                    </div>\
                 </div>\
        ';
        if(!$('#toast').length){
            $('body').append(toast);
        }else{
            $('#toast.weui_toast_content').html(msg);
        }
        $('#toast').fadeIn('fast',function(){
            setTimeout(function(){
                $('#toast').fadeOut('fast');
            },800);
        });
     }


     function loadingToast(){
        var msg;
        arguments[0] ? msg = arguments[0] : msg = '图片上传中' ;
        var loadingToast;
        loadingToast = '\
           <div id="loadingToast" class="weui_loading_toast" style="display:none;">\
             <div class="weui_mask_transparent"></div>\
             <div class="weui_toast">\
                 <div class="weui_loading">\
                     <div class="weui_loading_leaf weui_loading_leaf_0"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_1"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_2"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_3"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_4"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_5"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_6"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_7"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_8"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_9"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_10"></div>\
                     <div class="weui_loading_leaf weui_loading_leaf_11"></div>\
                 </div>\
                 <p class="weui_toast_content">' + msg + '</p>\
              </div>\
           </div>\
        ';
        if(!$('#loadingToast').length){
           $('body').append(loadingToast);
        }else{
           $('#loadingToast.weui_toast_content').html(msg);
        }
        $('#loadingToast').fadeIn('fast');
     }

</script>

</head>
<body ontouchstart>

  <div class="bd">
     <p class="page_title">Toast</p>
  </div>

  <div class="bd spacing">
     <div class="weui_cells">
        <div class="weui_cell">
            <button href="javascript:;" class="weui_btn weui_btn_primary" id="showToast">点击弹出Toast</button>
        </div>
        <div class="weui_cell">
            <a href="javascript:;" class="weui_btn weui_btn_primary" id="showLoadingToast">点击弹出Loading Toast</a>
        </div>
     </div>
  </div>

</body>
</html>
